<template>
  <div class="app">
    <div class="cont1200 userPage">
      <div class="Uleft">
        <el-row class="tac">
          <el-col>
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <template v-for="(item, IND) in this.$store.state.userDATA.sideNavigation">
                <el-submenu :key="item.id" :index="indexPJ(IND)" v-if="item.children.length>0">
                  <template slot="title">
                    <router-link :to="{name:item.name}">{{item.label}}</router-link>
                  </template>

                  <el-menu-item-group>
                    <!-- 
                    <el-menu-item
                      v-for="(itemOne) in item.children"
                      :key="itemOne.id"
                    >{{itemOne.label}}
                    
                    </el-menu-item>-->

                    <el-menu-item
                      v-for="(itemOne,indexOne) in item.children"
                      :key="itemOne.id"
                      :index="indexPJ(IND,indexOne)"
                    >
                      <router-link :to="{name:itemOne.name}">{{itemOne.label}}</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <el-menu-item :index="indexPJ(IND)" :key="item.id" v-else>
                  <router-link :to="{name:item.name}">{{item.label}}</router-link>
                </el-menu-item>
              </template>
            </el-menu>
          </el-col>
        </el-row>

        <el-row class="tac"></el-row>
      </div>
      <div class="Uright">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      userPage: ""
    };
  },
  created: function() {
 
  },
  methods: {
    handleOpen() {},
    handleClose() {},
    indexPJ(a, b) {
      return a, b, a.toString() + "-" + b;
    }
  }
};
</script>


<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.userPage {
  height: 500px;
  .Uleft,
  .Uright {
    float: left;
    margin-top: 15px;
  }
  .Uleft {
    width: 140px;
  }
  .Uright {
    margin-top: 4px;
    width: 1040px;
    padding-left: 20px;
  }
}
</style>
